<template>

    <div>
        <div class="showContent">

            <div class="term">
                <div class="actice-title">术语学习</div>
                <a @click="showChinese" href="javascript:;" class="checkChinese" style="margin-bottom: 20px;">查看中文</a>
                <div class="actice-name">
                    <p class="english"> {{english}}
                        <br />
                        <span v-if="chinese_flag">{{chinese}}</span>
                    </p>
                </div>
                <div class="actice-content">
                    <p>
                        <span style="font-weight:800;">来源：</span>
                        <span @click="toCatogory">
                            <Tag>{{sources}}</Tag>
                        </span>
                    </p>
                    <p>
                        <span style="font-weight:800;"> Definition: </span>
                        <br>
                        <p style="text-indent:2em">
                            {{englishEefines}}
                        </p>
                    </p>
                    <p v-if="chinese_flag">
                        <span style="font-weight:800;"> 定义：</span>
                        <br>
                        <p style="text-indent:2em">{{defines}}</p>
                    </p>
                </div>
                <router-link style="background:#fff;font-size:14px;color:#2d8cf0; float:right" class="term-herf" :to="{path: '/term'}">返回</router-link>

            </div>

        </div>
        <Modal title="查看术语提示" v-model="tipsBuyCard" type="warning" @on-ok="doPayGold">
            <p>查看术语需要会员卡哦，开通会员后享受更多的优惠！</p>
        </Modal>

    </div>
</template>
<style scoped>
    /*@import '../../assets/css/ccm.css';*/

    .term {
        width: 80%;
        height: auto;
        position: relative;
        padding: 12px 0;
        margin: 0 auto;
    }

    .term-title {
        width: 20px;
        float: left;
        height: 180px;
        line-height: 50px;
        padding: 0 120px;
        cursor: pointer;
        font-size: 14px;
        border-right: 1px solid #eee;
    }

    .term-title img {
        position: relative;
        right: 36px;
        top: 24px;
    }

    .term-content {
        width: 248px;
        height: 180px;
        text-align: center;
        border-right: 1px solid #eee;
        float: left;
    }

    .term-content p {
        height: 30px;
        width: 248px;
        font-size: 14px;
        line-height: 30px;
        cursor: pointer;
        text-align: center;
    }

    .term-active {
        margin-top: 60px;
    }

    .term-orgin {
        width: 520px;
        margin: 30px 0 0 48px;
        float: left;
    }

    .term-orgin p {
        height: auto;
        width: 500px;
        font-size: 14px;
        cursor: pointer;
        line-height: 48px;
    }

    .showContent {
        padding: 12px 0;
        height: auto;
    }

    .actice-title {
        font-size: 20px;
        width: 100%;
        line-height: 40px;
        text-align: center;
        /*margin-bottom: 10px;*/
        font-weight: 800;
        /*border-bottom: 1px solid #eee;*/
    }

    .actice-name {
        margin: 0 auto;
        text-align: center;
        /*border:2px solid #5cadff;*/
        background: #f3f3f3;
        border-radius: 4px;
    }

    .english,
    .chinese {
        font-size: 16px;
        color: #5cadff;
    }

    .english {
        font-weight: 800;
        line-height: 32px;
    }

    .actice-content {
        padding-left: 10%;
        height: auto;
        padding: 12px 0;
        margin: 36px auto 12px;
    }

    .actice-content p {
        font-size: 18px;
        line-height: 42px;
    }

    .checkChinese {
        display: block;
        margin: 0 auto;
        width: 100px;
        height: 32px;
        line-height: 32px;
        color: #15ccac;
        border-radius: 4px;
        border: 1px solid #15ccac;
        text-align: center;
    }

    @media (max-width:1024px) {
        .english {
            font-size: 20px;
            line-height: 34px;
        }
        .actice-content p {
            line-height: 32px;
        }
    }
</style>

<script>
    import { mapGetters } from 'vuex';

    export default {
        data() {
            return {
                english: '',
                chinese: '',
                sources: '',
                defines: '',
                englishEefines: '',
                chinese_flag: false,
                category_id: '',
                tipsBuyCard: false,
                member_card: null,
                gold:null,
            }

        },
        created() {
            this.getCarousel();
        },
        computed: {
            ...mapGetters(['member'])
        },
        methods: {
            getCarousel() {
                var param = {
                    fe: 1
                }
                if (this.chinese_flag) {
                    param.back = 1;
                }
                this.$http.get('/term/' + this.$route.query.id, {
                    params: param
                })
                .then(res => {
                    this.english = res.data.data.english;
                    this.chinese = res.data.data.chinese;
                    this.sources = res.data.data.sources;
                    this.defines = res.data.data.defines;
                    this.gold = res.data.data.gold;
                    if (this.defines == "" || this.defines == null) {
                        this.chinese_flag = true;
                    }
                    this.englishEefines = res.data.data.english_defines;
                    this.category_id = res.data.data.category_id;
                }).catch(err => {
                    this.$Notice.error({
                        title: err.response.data.message
                    })
                    // this.$Message.error(err.response.data.message);

                })
            },
            //跳到来源的法律法规
            toCatogory() {
                this.$router.push({ path: '/statute', query: { q: this.category_id } })
            },
            //点击查看中文
            showChinese() {
                if (this.member.id) {
                    if (this.gold == 0 || this.member.term || this.member.gold >= this.gold) {
                        this.chinese_flag = true;
                        this.getCarousel();
                    } else if(!this.member.term) {
                        this.$Modal.confirm({
                            title: '提示',
                            content: '查看中文需要购买术语卡。点击“确定”前往个人中心',
                            onOk: () => {
                                this.$router.push({ path: '/personal', query: { name: 'card' } });
                            },
                            onCancel: () => {

                            }
                        });
                    }
                } else {
                    this.$store.dispatch('login', true);
                }
            },
            doPayGold() {
                this.routeLink('/personal?name=card');
            },
        }
    }
</script>